<template>
  <div>
    <header>
      <img src="../../../assets/img/index/index (3).png" alt class="a1" />
      <img src="../../../assets/img/index/index (4).png" alt />
      <div>
        <i class="iconfont icon-search" @click="search"></i>
        <input type="text" placeholder="按内容搜索" />
      </div>
      <img src="../../../assets/img/index/index (5).png" alt />
    </header>
    <ul class="nav">
      <li v-for="(item) in arr" :key="item.id" @click="foodList(item.id)">
        {{item.name}}
        <span></span>
      </li>
      <li>
        <img src="../../../assets/img/index/index (7).png" alt />
        分类
      </li>
    </ul>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in arrbanner" :key="item.id">
        <img :src="$pre+item.img" alt />
      </van-swipe-item>
    </van-swipe>
    <ul class="content2">
      <li>
        <img src="../../../assets/img/index/index (9).png" alt />
        <p>限时秒杀</p>
      </li>
      <li>
        <img src="../../../assets/img/index/index (10).png" alt />
        <p>畅销商品</p>
      </li>
      <li>
        <img src="../../../assets/img/index/index (11).png" alt />
        <p>品质大牌</p>
      </li>
      <li>
        <img src="../../../assets/img/index/index (12).png" alt />
        <p>小U自营</p>
      </li>
      <li>
        <img src="../../../assets/img/index/index (13).png" alt />
        <p>积分商场</p>
      </li>
    </ul>
    <div class="bg">
      <div class="content3">
        <img src="../../../assets/img/index/index (14).png" alt />
        <div>
          <img src="../../../assets/img/index/index (15).png" alt />
          <img src="../../../assets/img/index/index (16).png" alt />
        </div>
      </div>
      <div class="content4">
        <div>
          <p>双11尖货预购</p>
          <p>畅购全球</p>
        </div>
        <div>
          <img src="../../../assets/img/index/index (17).png" alt />
          <img src="../../../assets/img/index/index (18).png" alt />
          <img src="../../../assets/img/index/index (19).png" alt />
          <img src="../../../assets/img/index/index (20).png" alt />
        </div>
      </div>
      <v-list></v-list>
    </div>
  </div>
</template>

<script>
import { reqBanner } from "../../../http/api.js";
import vList from "./components/list.vue"
export default {
  components:{vList},
  data() {
    return {
      arrbanner: [],
      arrremen: [],
      arr: [
        { id: 1, name: "推荐" },
        { id: 2, name: "女装" },
        { id: 3, name: "鞋包" },
        { id: 4, name: "居家" },
        { id: 5, name: "母婴" },
        { id: 6, name: "美妆" }
      ]
    };
  },
  methods: {
    search() {
      this.$router.push("/foodSearch");
    },
    foodList(id) {
      this.$router.push("/foodList?id=" + id);
    }
  },
  mounted() {
    reqBanner().then(res => {
      this.arrbanner = res.data.list;
    });
  }
};
</script>

<style scoped>
.my-swipe {
  height: 4rem;
}
.my-swipe img {
  width: 100%;
  height: 100%;
}
header {
  height: 1.14rem;
  background: linear-gradient(to bottom, #ff6040, #ff7a68);
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
header > img:nth-of-type(1) {
  width: 0.37rem;
  height: 0.48rem;
}
header > img:nth-of-type(2) {
  width: 1.82rem;
  height: 0.48rem;
}
header div {
  width: 3.42rem;
  height: 0.64rem;
  background-color: white;
  border-radius: 4px;
  display: flex;
}
header > input:nth-of-type(1) {
  width: 0.4rem;
  height: 0.4rem;
}
header div i {
  height: 0.64rem;
  width: 0.6rem;
  font-size: 0.5rem;
  line-height: 0.64rem;
  text-align: center;
}
header div input:nth-of-type(1) {
  width: 2.82rem;
  height: 0.64rem;
}
.nav {
  font-size: 0.26rem;
  height: 0.56rem;
  color: white;
  background: linear-gradient(to bottom, #ff7a68, #ff8a7f);
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  line-height: 0.51rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0px 4px 4px #ffd7d0;
}
.nav li:hover span {
  width: 0.4rem;
  height: 0.05rem;
  border-radius: 1px;
  background: white;
  display: block;
  margin: 0 auto;
}
.nav li:hover {
  font-weight: bolder;
}
.nav li:nth-of-type(7) {
  box-shadow: -5px 0 8px #f56557;
  line-height: 0.56rem;
  display: flex;
}
.nav li:nth-of-type(7) img {
  width: 0.24rem;
  height: 0.26rem;
  margin: 8px 8px 0;
}
.content2 {
  height: 1.84rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.content2 li {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 1rem;
  align-items: center;
  font-size: 0.18rem;
}
.content2 li > img {
  width: 0.6rem;
  height: 0.62rem;
}
.bg {
  background: #f2f2f2;
}
.content3 {
  width: 7.1rem;
  margin: 0 auto;
  height: 3.88rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.content3 > img,
.content3 > div {
  width: 3.5rem;
  height: 3.5rem;
}
.content3 > div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.content3 > div > img {
  width: 3.5rem;
  height: 1.7rem;
}
.content4 {
  height: 1.36rem;
  width: 7.1rem;
  background: white;
  margin: 0 auto;
}
.content4 > div:nth-of-type(1) {
  display: flex;
  justify-content: space-around;
  line-height: 0.84rem;
  color: gray;
  font-size: 0.26rem;
}
.content4 p:hover {
  color: #ff6040;
  font-weight: bolder;
  font-size: 0.3rem;
}
.content4 > div:nth-of-type(2) {
  display: flex;
  justify-content: space-around;
}
.content4 > div:nth-of-type(2) img {
  width: 1.6rem;
  /* height: 0.48rem; */
}

</style>